import React, {Component} from 'react'
import { Upload, message } from 'antd';
import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
import PubSub from 'pubsub-js'

export default class Avatar extends Component {
  state = {
    loading: false,
  };
  getBase64(img, callback) {
    const reader = new FileReader();
    reader.addEventListener('load', () => callback(reader.result));
    reader.readAsDataURL(img);
    // console.log(reader)
  }

  beforeUpload(file) {
    const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
    if (!isJpgOrPng) {
      message.error('You can only upload JPG/PNG file!');
    }
    const isLt2M = file.size / 1024 / 1024 < 2;
    if (!isLt2M) {
      message.error('Image must smaller than 2MB!');
    }
    // console.log(file)
    return isJpgOrPng && isLt2M;
  }


  handleChange = info => {
    console.log("info是",info.file)
    if (info.file.status === 'uploading') {
      this.setState({ loading: true });

      // console.log(info.file.originFileObj)
      this.getBase64(info.file.originFileObj, imageUrl =>{
        this.setState({
          imageUrl,
          loading: false,
        })
        // console.log(imageUrl)
        PubSub.publish("Img", info.file.originFileObj)
        // console.log(info.file.originFileObj)
      })
    }
    // if (info.file.status === 'done') {
    //   // Get this url from response in real world.
    //   this.getBase64(info.file.originFileObj, imageUrl =>{
    //     this.setState({
    //       imageUrl,
    //       loading: false,
    //     })
    //     console.log(imageUrl)
    //   })
    // }
    // console.log(info)
  };

  render() {
    const { loading, imageUrl } = this.state;
    const uploadButton = (
      <div>
        {loading ? <LoadingOutlined /> : <PlusOutlined />}
        <div style={{ marginTop: 8 }}>上传图片</div>
      </div>
    );
    return (
      <Upload
        name="avatar"
        listType="picture-card"
        className="avatar-uploader"
        showUploadList={false}
        beforeUpload={this.beforeUpload}
        onChange={this.handleChange}
        customRequest={()=>{}}
      >
        {imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%', height:"100%" }} /> : uploadButton}
      </Upload>
    );
  }
}
